<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
       <!-- 在vue中，如果绑定事件时没加小括号，函数默认有参数，参数是事件对象 -->
      <button @click="fn">点击-没有小括号</button>
      <!-- 绑定事件时加了小括号，代表要自己传递实参，而这里没写实参，所以形参拿到undefined -->
      <button @click="fn()">点击-加了小括号-小括号里没传参</button>
      <!-- 传了10形参就是10 -->
      <button @click="fn(10)">点击-加了小括号-小括号里传了10</button>
      <button @click="fn(10, 20)">点击-加了小括号-小括号里传了10</button>

      <!-- 我既想传参，又想拿到事件对象 -->
      <!-- $event代表事件对象 -->
      <a @click="fn($event, 10)" href="http://www.baidu.com">传参并拿事件对象</a>
    </div>

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        methods: {
          fn (e, n) {
            // 阻止默认行为
            e.preventDefault();
            console.log(e, n)
          }
        }
      })
    </script>
  </body>
</html>
